<template>
  <div class="pictureContainer">
    <!-- 相关人员 -->
    <p class="title" style="color: white">同栋人员信息</p>
    <span style="color: white">共{{ tableData.length }}条数据</span>
    <el-table
      :data="tableData"
      style="width: 98%"
      height="1150"
      :default-sort="{ prop: 'RYLX', order: 'descending' }"
    >
      <el-table-column fixed prop="XM" label="姓名" width="80" sortable />
      <el-table-column prop="ZJHM" label="身份证" width="180" sortable />
      <el-table-column prop="房号" label="房号" width="80" sortable />
      <el-table-column prop="RYLX" label="人员类型" width="130" sortable />
      <el-table-column prop="JZD" label="居住地" width="300" />
    </el-table>
  </div>
</template>

<script>
/*eslint-disable */
import axios from "axios";
import pubsub from "pubsub-js";
import { getCurrentInstance, onMounted } from "vue-demi";
import url from "@/components/URL.json";

export default {
  name: "pictureRight",
  data() {
    return { remark: "", tableData: [] };
  },
  setup() {
    const { proxy } = getCurrentInstance();
    let subList = [];

    onMounted(() => {
      subList[0] = pubsub.subscribe("peopleSelected", (n, data) => {
        // 查询同栋人员
        getNeighbour(data);
      });
      setTimeout(() => {
        Array.from(document.querySelectorAll("th>.cell")).forEach((e) => {
          e.style["color"] = "#1296db";
        });
      }, 500);
    });

    // 查询同栋人员
    function getNeighbour(peopleSelected) {
      // 获取当前楼栋经纬度
      let location_x = peopleSelected["location_x"];
      let location_y = peopleSelected["location_y"];
      //   发送至后端查询
      axios({
        method: "get",
        url: url.basicURL + "getNeighbour",
        params: {
          x: location_x,
          y: location_y,
        },
      }).then((res) => {
        proxy.tableData = [];
        // 房号字段补缺
        res.data.forEach((element) => {
          if (Array.from(element.房号).length < 2) {
            element.房号 = "--号房";
          }
        });
        proxy.tableData = res.data;
      });
    }

    return { subList };
  },
  watch: {
    tableData() {
      setTimeout(() => {
        // 获取节点集
        let nodeList = Array.from(document.querySelectorAll("tr"));
        nodeList.forEach((node) => {
          node.addEventListener("click", () => {
            // 读取身份证
            let num = Array.from(
              Array.from(event.target.parentNode.parentNode.children)[1]
                .children
            )[0].innerHTML.split(">")[1];
            // 后端读取数据
            axios({
              method: "get",
              url: url.basicURL + "getPeopleByNum",
              params: { num: num },
            }).then((res) => {
              pubsub.publish("peopleSelected", res.data[0]);
              pubsub.publish("peopleReload", "@");
            });
          });
        });
      }, 100);
    },
  },
  beforeDestroy() {
    this.subList.forEach((element) => {
      pubsub.unsubscribe(element);
    });
  },
  beforeRouteLeave() {
    this.subList.forEach((element) => {
      pubsub.unsubscribe(element);
    });
  },
};
</script>

<style lang="less" scoped>
.pictureContainer {
  // background-color: antiquewhite;
  width: 100%;
  height: 100%;
  position: relative;
  top: 0%;
  > .title {
    background-image: ~"url(@{app-images-root}/button_bg2.png)";
    background-size: 100% 100%;
    height: 5%;
    padding-top: 3.5%;
    font-size: 170%;
    font-weight: bold;
    text-align: center;
    position: relative;
    color: #1296db;
  }
  > img {
    width: 90%;
    position: relative;
    left: 5%;
  }
  > .bz {
    text-align: center;
    font-size: 120%;
  }
  > span {
    position: relative;
    right: -80%;
  }
}

.pictureContainer::-webkit-scrollbar {
  width: 7px;
}

.pictureContainer::-webkit-scrollbar-thumb {
  height: 25px;
  border-radius: 15px;
  background: rgb(46, 46, 46);
}

.pictureContainer::-webkit-scrollbar-track {
  background: transparent;
}
.el-table {
  left: 1%;
  border-bottom: rgb(100, 100, 100) 1px solid;
}
</style>